<template>
	<view class="content login-content">
		<view class="header">
			<!-- <image src="/static/shilu-login/logo.png"></image> -->
			<div class="logo">M</div>
		</view>

		<view class="list">
			<label class="list-call">
				<uni-icons type="person-filled" color="#aaa" class="login-ipt-icon"></uni-icons>
				<input class="sl-input" v-model="username" type="text" maxlength="11" placeholder="输入用户名" />
			</label>

			<label class="list-call">
				<uni-icons type="locked-filled" color="#aaa" class="login-ipt-icon"></uni-icons>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true" />
			</label>
			<label class="list-call">
				<uni-icons type="paperplane-filled" color="#aaa" class="login-ipt-icon"></uni-icons>
				<picker class="sl-input" @change="e => (companyIdx = e.detail.value)" :value="companyIdx" :range="companyList" range-key="F_FullName">
					<view v-if="companyIdx > -1">{{ companyList[companyIdx].F_FullName }}</view>
					<text v-else style="color:#888">请选择公司</text>
				</picker>
			</label>
		</view>

		<button :disabled="loginDisabled" class="button-login" hover-class="button-hover" @tap="bindLogin()"><text>登录</text></button>

		<!-- <view>{{ token }}</view> -->
		<!-- <view class="agreenment">
      <navigator url="forget" open-type="navigate">忘记密码</navigator>
      <text>|</text>
      <navigator url="reg" open-type="navigate">注册账户</navigator>
	  
    </view> -->
	<view style="position:absolute;bottom:20rpx;text-align: center;width:100%;color:#aaa;font-size: 24rpx;"> 
		 <view>Copyright © 2020 深圳麦英洛科技有限公司</view> 
		 <view>麦英洛生产运营管理平台</view>
	</view>
	</view>
</template>

<script>
import api from '@/serveices/wms-api.js';
import md5 from '@/serveices/md5.js';
//const md5 = ()=>""
export default {
	beforeCreate() {
		uni.showLoading({ title: '加载中'})
		api.company_list().then(result => {
			this.companyList = result.data;
			if (this.companyList.length) {
				this.companyIdx = 0;
			}
		}).catch(()=>{
			
		}).finally(()=>{
			uni.hideLoading()
		})
	},
	data() {
		return {
			username: '',
			password: '',
			companyList: [{}],
			companyIdx: -1,
			token: '',
			loginDisabled:false
		};
	},
	methods: {
		bindLogin() {
			uni.removeStorageSync('login_user_code')
			// uni.setStorageSync('user_id','sys_admin')
			// uni.setStorageSync('user_name','系统管理员')
			// uni.setStorageSync('user_token','121212')
			//api.login()
			if (!this.username) {
				uni.showToast({
					icon: 'none',
					title: '用户名不能为空',
					duration: 2000
				});
			} else if (!this.password) {
				uni.showToast({
					icon: 'none',
					title: '密码不能为空',
					duration: 2000
				});
			} else if (!(this.companyIdx > -1 && this.companyList[this.companyIdx])) {
				uni.showToast({
					icon: 'none',
					title: '公司不能为空',
					duration: 2000
				});
			} else {
				this.loginDisabled = true
				api.login({
					username: this.username,
					password: md5(this.password),
					company: this.companyList[this.companyIdx].F_CompanyId
				}).then(result => {
					this.token = result.data.baseinfo.token;
					// uni.showModal({
					// 	title: '登录成功',
					// 	content: '当前token为' + result.data.baseinfo.token,
					// 	success: function(res) {
					// 		// if (res.confirm) {} else if (res.cancel) {}

					var globalUser = getApp().globalData.userInfo;
					globalUser.isLogin = true;
					globalUser.account = result.data.baseinfo.account;
					globalUser.realName = result.data.baseinfo.realName;
					globalUser.id = result.data.baseinfo.userId;
					globalUser.token = result.data.baseinfo.token;
					// console.log(result)

					const arr = result.data.modules.map(x => {
						return {
							id: x.F_ModuleId,
							isParent: x.F_Target == 'expand',
							name: x.F_FullName,
							code: x.F_EnCode
						};
					});
					getApp().globalData.modules = arr;

					uni.setStorage({
						key:'login_user_code',
						data:this.username
					})
					uni.navigateTo({ url: '../home/workplace' });
					// uni.navigateTo({ url: '../home/workplace' });

					// }
					// });
				}).finally(()=>{
					this.loginDisabled = false
				})
			}
		}
	},mounted	() {
		uni.getStorage({
			key:'login_user_code',
			success:(ret)=> {
				this.username = ret.data
			}
		})
	}
};
</script>

<style>
.login-ipt-icon {
	color: #aaa !important;
	font-size: 38rpx !important;
}
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header {
	width: 160rpx;
	height: 160rpx;
	background: rgba(63, 205, 235, 1);
	box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
	border-radius: 50%;
	margin-top: 60rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40rpx;
}

.header .logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background-image: none;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
	line-height: 160rpx;
	text-align: center;
	font-size: 54px;
	font-family: -webkit-pictograph;
	font-weight: 900;
	text-shadow: 0 0 4px #fff, 2px -2px 4px #484a49;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 120rpx;
	color: #333333;
	border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
	width: 40rpx;
	height: 40rpx;
}

.list-call .sl-input {
	flex: 1;
	text-align: left;
	font-size: 32rpx;
	margin-left: 16rpx;
}

.button-login {
	color: #fff;
	font-size: 34rpx;
	width: 650rpx;
	height: 100rpx;
	background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
	box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80rpx;
}

.button-hover {
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreenment {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	margin-top: 80rpx;
	color: #ffa800;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}

.agreenment text {
	font-size: 24rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
}
</style>
